﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="AutoCompleteTextbox.ascx.cs"
    Inherits="AutoCompleteTextbox" %>
<!--
    Pages that use this control will need these...

    <link type="text/css" rel="Stylesheet" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" />

    <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>

    <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
-->
 
    <style>
        .ui-autocomplete
        {
            max-height: <%= MaxHeight.ToString() + "px" %>;
            overflow-y: auto; /* prevent horizontal scrollbar */
            overflow-x: hidden; /* add padding to account for vertical scrollbar */
            padding-right: 20px;
        }
        /* IE 6 doesn't support max-height
	 * we use height instead, but this forces the menu to always be this tall
	 */* html .ui-autocomplete
        {
            height: <%= MaxHeight.ToString() + "px" %>;
        }
    </style>
   

<script type="text/javascript">

        $(document).ready(function(){

	        var userSelectedValue = false;
        
            var theComboBox = $('#' + '<%= this.TextBoxClientId %>');
            var pageMethodURL = '<%= PageMethodURL %>';
            
            theComboBox.autocomplete({
			    source: callGetData,  
			    delay: 200,
			    minLength: <%= MinSearchTermLength %>,
			    select: function( event, ui ) { 
			        userSelectedValue = true;
			        //alert(ui.item.id);
			        //alert(ui.item.value);
			    },
			    close: function(event, ui) { 
<% if (EnforceSelection)
 {%>			    
			        enforceSelection();
<%
 }%>
			    }

		    });
		    
	    
		    function callGetData(request, response)
		    {
		        // This is used to enforce that the user
		        //   selects from the list
		        userSelectedValue = false;
        	    
		        $.ajax({
                    type: "POST",
                    url: pageMethodURL,
                    data: "{ searchTerm: '" + request.term + "' }",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(data) {
                        response(data.d);
                    },
                error: function(jqXHR, textStatus, errorThrown) { alert(errorThrown)}
                
                });
		    }

            function enforceSelection()
            {
                // Had to put in a little delay so that
                //   the combobox has time to set the userSelectedValue
                //   variable before attempting to check it.
                setTimeout(function () { 
                
                    if (!userSelectedValue)
                    {
                        theComboBox.val(''); 
                        theComboBox.autocomplete("search",'');
                    }
                
                },400);
            }		
			
        });
    
   
</script>

<asp:TextBox id="tbComboBox" runat="server" />
